<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5-Video-Stream-Player</title>
    <style type="text/css">
        .videoPlayer {
            border: 1px solid #000;
            width: 800px;
        }

        #video {
            margin-top: 0px;
        }

        #videoControls {
            width: 800px;
            margin-top: 0px;
        }

        #progressWrap {
            background-color: black;
            height: 25px;
            cursor: pointer;
        }

        #playProgress {
            background-color: red;
            width: 0px;
            height: 25px;
        }

        #showProgress {
            font-weight: 600;
            font-size: 20px;
            line-height: 25px;
        }

        #duration {
            float: right;
        }

        #playBtn{
            width: 80px;
            height: 40px;
            margin-top: 8px;
            margin-left:8px;
            margin-bottom:8px;
            font-size: 18px;
        }
    </style>
</head>

<body>
    <div class="">
        <div class="videoPlayer" id="videoContainer">
            <video id="video" width="800" height="480" preload>
                <source src="http://127.0.0.1:8888?startTime=0" type='video/mp4'>
            </video>
            <div id="videoControls">
                <div id="progressWrap">
                    <div id="playProgress">
                        <span id="showProgress">0</span>
                    </div>
                </div>
                <div>
                    <div><span id="currentTime">00:00:00</span><span id="duration"></span></div>
                </div>
                <div>
                    <button id="playBtn" title="play"> Play</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function (window, document) {
            var video = document.getElementById("video");
            var videoControls = document.getElementById("videoControls");
            var videoContainer = document.getElementById("videoContainer");
            var playBtn = document.getElementById("playBtn");
            var fullScreenBtn = document.getElementById("fullScreenBtn");
            var progressWrap = document.getElementById("progressWrap");
            var playProgress = document.getElementById("playProgress");

            var currentTimeSpan = document.getElementById("currentTime");
            var durationSpan = document.getElementById("duration");

            var startTime = 0;
            var actualDuration;
            var videoPlayer = {
                init: function () {
                    var that = this;
                    bindEvent(video, "loadeddata", videoPlayer.initControls);
                    videoPlayer.operateControls();
                },
                initControls: function () {
                    videoPlayer.showHideControls();
                },
                showHideControls: function () {
                    bindEvent(video, "mouseover", showControls);
                    bindEvent(videoControls, "mouseover", showControls);
                    bindEvent(video, "mouseout", hideControls);
                    bindEvent(videoControls, "mouseout", hideControls);
                },
                operateControls: function () {
                    bindEvent(playBtn, "click", play);
                    bindEvent(video, "click", play);
                    bindEvent(progressWrap, "mousedown", videoSeek);
                    bindEvent(progressWrap, "mouseover", onProgressMouseover)
                    bindEvent(video, "timeupdate", ontimeupdate);
                }
            }

            videoPlayer.init();
            var ipcRenderer = require('electron').ipcRenderer;
            ipcRenderer.on('duration', function (event, message) {
                console.log('duration:', message)
                actualDuration = message;
                durationSpan.innerText = formatTime(message);
                play();
            });
            ipcRenderer.send("ipcRendererReady", "true");
            
            function bindEvent(ele, eventName, func) {
                if (window.addEventListener) {
                    ele.addEventListener(eventName, func);
                }
                else {
                    ele.attachEvent('on' + eventName, func);
                }
            }

            function play() {
                if (video.paused || video.ended) {
                    if (video.ended) {
                        video.currentTime = 0;
                    }
                    video.play();
                    playBtn.innerHTML = "Pause";
                }
                else {
                    video.pause();
                    playBtn.innerHTML = "Play";
                }
            }

            function updateProgress() {
                var percent = (startTime +  video.currentTime) / actualDuration;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                showProgress.innerHTML = (percent * 100).toFixed(1) + "%";
            }

            function videoSeek(e) {
                enhanceVideoSeek(e);
                play();
            }

            function enhanceVideoSeek(e) {
                var length = e.pageX - progressWrap.offsetLeft;
                var percent = length / progressWrap.offsetWidth;
                playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";
                startTime = percent * actualDuration;
                video.src = "http://127.0.0.1:8888?startTime=" + startTime;
            }

            function formatTime(result) {
                var h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
                var m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
                var s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
                return result = h + ":" + m + ":" + s;
            }

            function ontimeupdate(event) {
                console.log("ontimeupdate:", event.timeStamp / 1000 + "," + video.currentTime);
                var time = startTime + video.currentTime;
                currentTimeSpan.innerText = formatTime(time);
                updateProgress();
            }

            function onProgressMouseover(event) {
                console.log("onProgressMouseover:", event);
            }

        }(this, document))
    </script>
</body>

</html>